﻿
@{
    Layout = null;
}

@using System.Web.Optimization



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>矛盾纠纷月度数据统计</title>
    <link href="~/Content/Map/css/newTemplate.css" rel="stylesheet" />
    <link href="~/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />


</head>
<body style="width:100%;height:480px;">
    <div class="container-fluid">
        <div class="page-header">
            <h3>莒县统计图</h3>
        </div>
        <div>
            <ul id="myTab" class="nav nav-pills nav-stacked pull-left" style="padding-right: 20px;width: 20%;">
                <li class="active">
                    <a href="#xiangzhen" data-toggle="tab">
                        乡镇纠纷统计
                    </a>
                </li>
                <li>
                    <a href="#zhu" data-toggle="tab">
                        柱状图数据
                    </a>
                </li>
                <li>
                    <a href="#bing" data-toggle="tab">
                        饼图数据
                    </a>
                </li>
            </ul>
            <div id="myTabContent" class="tab-content pull-left" style="width: 80%;height: auto;">
                <div class="tab-pane fade in active" id="xiangzhen"></div>
                <div class="tab-pane fade" id="zhu">柱状图数据</div>
                <div class="tab-pane fade" id="bing">饼图数据</div>
            </div>
        </div>
    </div>
    <script src="~/libs/jquery/jquery.min.js"></script>
    <script src="~/libs/bootstrap/js/bootstrap.min.js"></script>
    @Scripts.Render("~/Bundles/highcharts")

    <script type="text/javascript">

        $(function () {

            //乡镇纠纷统计
            $.ajax({
                type: "GET",
                url: "GetTownbarChart",
                dataType: "json",
                success: function (result) {
                    var data = result.result;
                    var jsonStr = "";
                    jsonStr += "[";
                    for (var i = 0; i < data.length; i++) {
                        jsonStr += "['" + data[i].x + "', " + data[i].y + "],";
                    }
                    jsonStr = jsonStr.substring(0, (jsonStr.length - 1));
                    jsonStr += "]";
                    var json = eval(jsonStr);

                    $('#xiangzhen').highcharts({
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: '纠纷在乡镇中的占比'
                        },
                        xAxis: {
                            type: 'category',
                            labels: {
                                //rotation: 0,
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Verdana, sans-serif'
                                }
                            }
                        },
                        yAxis: {
                            min: 0,
                            allowDecimals: false,
                            title: {
                                text: '纠纷占比'
                            },
                            labels: {
                                formatter: function () {
                                    return this.value + '%';
                                }
                            }
                        },
                        legend: {
                            enabled: false
                        },
                        tooltip: {
                            pointFormat: '纠纷占比: <b>{point.y} %</b>'
                        },
                        series: [{
                            name: '总人口',
                            data: json,
                            dataLabels: {
                                enabled: true,
                                //rotation: -90,
                                color: '#FFFFFF',
                                align: 'center',
                                format: '{point.y}%', // one decimal
                                //y: 0, // 10 pixels down from the top
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Verdana, sans-serif'
                                }
                            }
                        }]
                    });
                },
                error: function (b, a) {
                    console.log && console.log("综治中心数据请求" + a)
                }
            });

            //柱状图数据
            $.ajax({
                type: "GET",
                url: "GetBarChart",
                dataType: "json",
                success: function (result) {
                    var data = result.result;
                    var jsonStr = "";
                    jsonStr += "[";
                    for (var i = 0; i < data.length; i++) {
                        jsonStr += "['" + data[i].x + "', " + data[i].y + "],";
                    }
                    jsonStr = jsonStr.substring(0, (jsonStr.length - 1));
                    jsonStr += "]";
                    var json = eval(jsonStr);

                    $('#zhu').highcharts({
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: '柱状图纠纷数据统计'
                        },
                        xAxis: {
                            type: 'category',
                            labels: {
                                //rotation: 0,
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Verdana, sans-serif'
                                }
                            }
                        },
                        yAxis: {
                            min: 0,
                            allowDecimals: false,
                            title: {
                                text: '纠纷总数'
                            }
                        },
                        legend: {
                            enabled: false
                        },
                        tooltip: {
                            pointFormat: '纠纷总量: <b>{point.y} 次</b>'
                        },
                        series: [{
                            name: '总人口',
                            data: json,
                            dataLabels: {
                                enabled: true,
                                //rotation: -90,
                                color: '#FFFFFF',
                                align: 'center',
                                //format: '{point.y}', // one decimal
                                //y: 0, // 10 pixels down from the top
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Verdana, sans-serif'
                                }
                            }
                        }]
                    });
                },
                error: function (b, a) {
                    console.log && console.log("综治中心数据请求" + a)
                }
            });

            //饼图数据
            $.ajax({
                type: "GET",
                url: "GetPie",
                dataType: "json",
                success: function (result) {
                    var data = result.result;
                    var jsonStr = "";
                    jsonStr += "[";
                    for (var i = 0; i < data.length; i++) {
                        jsonStr += "['" + data[i].x + "', " + data[i].y + "],";
                    }
                    jsonStr = jsonStr.substring(0, (jsonStr.length - 1));
                    jsonStr += "]";
                    var json = eval(jsonStr);

                    $('#bing').highcharts({
                        chart: {
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false
                        },
                        title: {
                            text: '饼状图纠纷量占比'
                        },
                        tooltip: {
                            headerFormat: '{series.name}<br>',
                            pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true,
                                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                    style: {
                                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                    }
                                }
                            }
                        },
                        series: [{
                            type: 'pie',
                            name: '纠纷量占比',
                            data: json
                        }]
                    });
                },
                error: function (b, a) {
                    console.log && console.log("综治中心数据请求" + a)
                }
            });

        });

    </script>

</body>
</html>
